<div class="ui segment js-tags">
    <div class="ui container" ng-show="!editMode" style="cursor:default;">
        <div class="ui grid">
            <div class="two wide column  js-tag-label">
                <div class="ui small label" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)">
                    {{ costomTag.name }} ({{ costomTag.cnt || 0 }})
                </div>
            </div>
            <div class="two wide column  js-tag-label" ng-if="tag.cnt" ng-repeat="tag in tags">
                <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
                    {{ tag.name }} ({{ tag.cnt || 0 }})
                </div>
            </div>
            <div class="two wide column  js-tag-label">
                <div class="ui small label" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)">
                    {{ costomAllUsersTag.name }} ({{ costomAllUsersTag.cnt || 0 }})
                </div>
            </div>
            <div class="two wide column js-tag-label">
                <div class="ui small label">
                    <i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
                    <i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i>
                    <i class="table icon" style="margin-right:0px;" data-content="点击以条目显示" data-position="top center" ng-show="showMode=='table'" ng-click="toggleShowMode('item')"></i>
                    <i class="list icon" style="margin-right:0px;" data-content="点击以表格显示" data-position="top center" ng-show="showMode=='item'" ng-click="toggleShowMode('table')"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
        <p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p>
        <div class="ui six stackable cards" sv-root sv-part="tags">
            <div class="card" style="background-color:#F5F5F5;" ng-click="showAddTag()" data-tooltip="添加书签">
                <div class="image">
                    <img src="./images/add-tag.png">
                </div>
            </div>
            <div class="card" style="background-color:#F5F5F5;" ng-click="toggleMode(false)" data-tooltip="退出编辑模式">
                <div class="image">
                    <img src="./images/back-tag.png">
                </div>
            </div>
            <div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" sv-element>
                <div class="content">
                    <div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
                    <div class="ui large fluid transparent input" style="height:19px;" ng-if="tag.edit">
                        <input type="text" ng-model="tag.name" style="font-size:18px;" id="tagedit{{tag.id}}">
                        <i class="checkmark icon" style="cursor:pointer;" ng-click="updateTag(tag)" title="更新分类"></i>
                        <i class="mail forward icon" style="cursor:pointer;" ng-click="backTag(tag)" title="放弃更新"></i>
                    </div>
                </div>
                <div class="content" style="cursor: move" sv-handle>
                    <div class="description">
                        <p>书签：{{ tag.cnt || 0 }}个</p>
                        <p>{{ tag.last_use }}</p>
                    </div>
                </div>
                <div class="extra content">
                    <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png"
                        ng-click="delTag(tag)" title="删除分类">
                    <label for="tagedit{{tag.id}}" ng-show="!tag.edit">
                        <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png"
                            ng-click="editTag(tag)" title="编辑分类">
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
    正在加载中...
</div>
<table class="ui selectable sortable celled table js-tags-table" ng-if="bookmarkCount > 0  && showMode=='table'" style="margin-top:-15px;"
    ng-show="!loadBookmarks && !editMode">
    <thead>
        <tr>
            <th class="forbid_sorted">标题</th>
            <th class="forbid_sorted">链接</th>
            <th style="width:90px;" ng-class="{descending: order[0], sorted:order[0]}" ng-click="changeOrder(0)" title="点击可对表格进行排序">点击次数</th>
            <th style="width:100px;" ng-class="{descending: order[1], sorted:order[1]}" ng-click="changeOrder(1)" title="点击可对表格进行排序">创建日期</th>
            <th style="width:100px;" ng-class="{descending: order[2], sorted:order[2]}" ng-click="changeOrder(2)" title="点击可对表格进行排序">最后点击</th>
            <th style="width:150px;" class="forbid_sorted">分类</th>
            <th style="width:88px;" class="forbid_sorted">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bookmark in bookmarksByTag" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
            <td>
                <img class="ui ui middle aligned tiny image" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" style="width:16px;height:16px;cursor:pointer;"
                    ng-click="jumpToUrl(bookmark.url, bookmark.id)">
                <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;">
                    {{ bookmark.title }}
                </span>
            </td>
            <td>
                <span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.url)" style="cursor:default;">{{ bookmark.url }}</span>
            </td>
            <td>{{ bookmark.click_count }}</td>
            <td>
                <span title="{{bookmark.created_at}}" class="need_to_be_rendered" data-timeago="{{bookmark.created_at}}"></span>
            </td>
            <td>
                <span id="time{{bookmark.id}}" title="{{bookmark.last_click}}" class="need_to_be_rendered" data-timeago="{{bookmark.last_click}}"></span>
            </td>
            <td>
                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="getBookmarks(tag.id, 1)">
                    {{ tag.name }}
                </div>
            </td>
            <td>
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)"
                    title="删除书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)"
                    title="编辑书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)"
                    title="书签详情">
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="7">
                <pagination></pagination>
            </th>
        </tr>
    </tfoot>
</table>
<div class="ui segment js-tag-costomTag" ng-if="bookmarkCount > 0 && showMode=='item'" style="margin-top:-15px;" ng-show="!loadBookmarks && !editMode">
    <div class="ui five column grid">
        <div ng-repeat="bookmark in bookmarksByTag" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}"
            ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)"
            ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
            <img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" style="width:16px;height:16px;"
                ng-click="detailBookmark(bookmark);$event.stopPropagation()">
            <span>{{ bookmark.title}}</span>
        </div>
    </div>
    <div class="ui divider"></div>
    <div class="ui grid">
        <div class="five wide column" style="margin-top:10px;">
            <div class="ui three column grid" style="cursor: default;">
                <div class="column" ng-click="changeOrder(1)">
                    <i class="add to calendar large icon" ng-class="{green: order[1]}" style="margin-bottom:4px;"></i>
                    <span ng-class="{fontgreen: order[1]}" style="margin-left:-5px;">添加日期</span>
                </div>
                <div class="column" ng-click="changeOrder(0)">
                    <i class="sort numeric descending large icon" ng-class="{green: order[0]}" style="margin-bottom:4px;"></i>
                    <span ng-class="{fontgreen: order[0]}" style="margin-left:-5px;">点击次数</span>
                </div>
                <div class="column" ng-click="changeOrder(2)">
                    <i class="sort alphabet descending large icon" ng-class="{green: order[2]}" style="margin-bottom:4px;"></i>
                    <span ng-class="{fontgreen: order[2]}" style="margin-left:-5px;">最后点击</span>
                </div>
            </div>
        </div>
        <div class="eleven wide column">
            <pagination></pagination>
        </div>
    </div>
</div>